import Verification from "@/assets/image/Property 1=Verification.png";
import ArrowDown from "@/assets/image/icons/arrow-down.svg";
import { CustomTitle } from "@/components/customTitle";
import { getRegisterList } from "@/services/announcement";
import { Card } from "antd";
import { useEffect, useState } from "react"; // 新增useState导入
import "./index.less";

const cardStyle = {
  body: {
    padding: "8px 24px",
    boxShadow: "0px 3px 10px 0px #927B611A",
    marginBottom: "24px",
  },
};

export default function HowToRegister() {
  // 管理每个卡片的展开状态（数组索引对应卡片顺序）
  const [expanded, setExpanded] = useState<boolean[]>([]);

  // 切换展开状态的方法（参数为卡片索引）
  const handleToggle = (index: number) => {
    setExpanded((prev) => prev.map((item, i) => (i === index ? !item : item)));
  };

  const [registerData, setRegisterData] = useState<any[]>([]);

  useEffect(() => {
    getRegisterList()
      .then((data) => {
        const safeData = data.data || [];
        setRegisterData(safeData);
        // 根据数据长度初始化展开状态（全部初始为false）
        setExpanded(new Array(safeData.length).fill(false));
      })
      .catch((error) => {
        console.error(error, "error");
      });
  }, []);

  return (
    <div className="how-to-register">
      <CustomTitle>How to Register</CustomTitle>
      <div className="card-container">
        {registerData.length > 0 && (
          <>
            {registerData.map((item, index) => (
              <Card key={index} bordered={false} style={cardStyle.body}>
                <div className="card-left">
                  <img className="card-img" src={Verification} alt="png" />
                  <span className="subTitle">{item?.title}</span>
                </div>
                {/* 修改后的箭头图标 */}
                <img
                  className="card-icon"
                  src={ArrowDown}
                  alt="svg"
                  onClick={() => handleToggle(index)} // 点击触发第一个卡片的状态切换
                  style={{
                    transform: expanded[index] ? "rotate(180deg)" : "none",
                    transition: "transform 0.3s ease", // 添加旋转过渡动画
                  }}
                />
                {/* 展开内容 */}
                {expanded[index] && (
                  <div className="expanded-content">
                    <p>{item?.desp}</p>
                    <ul>
                      <li>{item.content1}</li>
                      <li>{item.content2}</li>
                    </ul>
                  </div>
                )}
              </Card>
            ))}
          </>
        )}
      </div>
    </div>
  );
}
